<template>
  <div style="background: #2845b2; height: 100vh; color: #fff">
    <!-- <header class="header">
      <div class="logo" style="display: flex">
        <img
          style="width: 50px; height: 30px"
          src="@/asstes/images/ats_logo_RGB_small.jpg"
          alt=""
        />
        <div class="title" style="margin-left: 10px">Smart Factory</div>
      </div>
      <div style="cursor: pointer; font-size: 14px; color: #ccc">
        <div @click="changeLang('en')" v-if="lang === 'zh_CN'">English</div>
        <div @click="changeLang('zh_CN')" v-else>中文</div>
      </div>
    </header> -->
    <div class="con">
      <!-- <div class="con1">AT&S</div> -->
      <img
        style="height: 100px; width: auto"
        src="@/asstes/images/home.png"
        alt=""
      />
      <div>{{ $t("common.title") }}</div>
    </div>
    <Form @submit="onSubmit">
      <CellGroup inset>
        <!-- <Field
          readonly
          clickable
          name="picker"
          :value="currentFacility"
          :label="$t('common.facility')"
          placeholder=""
          @click="showPicker = true"
        />
        <Popup v-model="showPicker" position="bottom">
          <Picker
            show-toolbar
            :columns="facilityArr"
            @confirm="
              (value) => {
                currentFacility = value;
                showPicker = false;
              }
            "
            @cancel="showPicker = false"
          />
        </Popup> -->
        <Field
          v-model="userId"
          name="userId"
          :label="$t('common.user')"
          :placeholder="$t('common.user')"
          autofocus
          @keyup.enter.native="onSubmit"
          :rules="[{ required: true, message: $t('common.tip1') }]"
        />
        <Field
          v-model="password"
          type="password"
          name="password"
          :label="$t('common.password')"
          :placeholder="$t('common.password')"
          :rules="[{ required: true, message: $t('common.tipPassword') }]"
        />
      </CellGroup>
      <div style="margin: 16px">
        <Button round block type="info" native-type="submit">
          {{ $t("common.login") }}
        </Button>
      </div>
    </Form>
  </div>
</template>
<script>
import axios from "axios";
import {
  Locale,
  Form,
  Field,
  CellGroup,
  Button,
  Icon,
  ActionSheet,
  DropdownMenu,
  DropdownItem,
  Picker,
  Popover,
  Popup,
  Cell,
  Toast,
} from "vant";
export default {
  name: "Login",
  components: {
    Form,
    Field,
    CellGroup,
    Button,
    Icon,
    ActionSheet,
    DropdownMenu,
    DropdownItem,
    Picker,
    Popover,
    Popup,
    Cell,
  },
  data() {
    return {
      userId: "",
      password: "",
      currentFacility: "SHA",
      facilityArr: [],
      showPicker: false,
      lang: localStorage.getItem("lang") || "en",
    };
  },
  mounted() {
    // this.getFacilitys();
  },
  methods: {
    async getFacilitys() {
      const res = await axios.get("/SicCore/GetFacilitys");
      this.facilityArr = res;
      const val = localStorage.getItem("currentFacility");
      const index = res.findIndex((item) => item == val);
      this.currentFacility = index > -1 ? val : res[0];
    },
    async onSubmit() {
      // if (!this.currentFacility) {
      //   Toast.fail("Please select a facility");
      //   return;
      // }
      // login()
      const res = await axios.post("/SicCore/SicLogin", {
        userId: this.userId.slice(0, 7),
        password: this.password,
        loginType: "UserNumber",
      });
      sessionStorage.setItem("token", JSON.stringify(res?.token.tokenId));
      sessionStorage.setItem("userInfo", JSON.stringify(res?.token));
      localStorage.setItem("currentFacility", this.currentFacility);
      this.$router.replace("/transfer").then(() => {
        location.reload();
      });
    },
    changeLang(lang) {
      localStorage.setItem("lang", lang);
      location.reload();
    },
  },
};
</script>
<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  padding: 0.2667rem;
  align-items: center;
}
.con {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5em 0;

  .con1:nth-child(1) {
    font-size: 0.8rem;
    color: #fff;
    font-weight: 700;
    background-color: #15a4fa;
    padding: 0.1333rem;
  }
  .con1:nth-child(2) {
    font-size: 0.48rem;
    margin-top: 0.5333rem;
  }
}
.setBox {
  height: 8rem;
}
</style>
